<!DOCTYPE html>
<html lang="en" class="no-js" xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout" layout:decorator="layout">
<head>
<title>帮助中心分类管理</title>
</head>
<body>
<div layout:fragment="content">
<link th:href="@{/plugins/bootstrap-modal/css/bootstrap-modal-bs3patch.css}" rel="stylesheet" href="plugins/bootstrap-modal/css/bootstrap-modal-bs3patch.css"/>
<link th:href="@{/plugins/bootstrap-modal/css/bootstrap-modal.css}" rel="stylesheet" href="plugins/bootstrap-modal/css/bootstrap-modal.css"/>
<link th:href="@{/plugins/zTree/css/zTreeStyle/zTreeStyle.css}" rel="stylesheet" href="plugins/zTree/css/zTreeStyle/zTreeStyle.css"/>
<script th:src="@{/plugins/zTree/js/jquery.ztree.core-3.5.js}" src="plugins/zTree/js/jquery.ztree.core-3.5.js" type="text/javascript"></script>


<script th:inline="javascript">
$(document).ready(function(){
	$('#treebutton').html($("#parent_id").find("option:selected").text() + '<i class="fa fa-angle-down"></i>');
	$("#parent_id").change(function(){$('#treebutton').html($("#parent_id").find("option:selected").text() + '<i class="fa fa-angle-down"></i>'); });
	
	$("#form_articleCategoryEdit").validate({
	    rules:{
	    	name:{  //分类名称长度不能超过 100个字符
	            required:true,
	            maxlength:100
	        },
	        sort_order:{  //整数  最大为254，最小为0   
	        	required:true,
	            digits:true,  
	            range:[0,254]     
	        },
	        keywords:{    //文章分类  关键字  长度不能超过 100个字符
	           // required:true,
	            maxlength:100
	        },
	        cat_desc:{    //文章分类  描述  长度不能超过 300个字符
	        	//required:true,  
	            maxlength:300   
	        },
	    },
	    messages:{
	    	name:{
	            required:"请输入文章分类名称",
	            maxlength:"最大不能超过100个字符"
	        },
	        sort_order:{
	            required:"请输入文章排序",
	            maxlength:"最大值不能超过254"
	        },
	        keywords:{
	            //required:"请输入文章关键词",
	            maxlength:"最大不能超过100个字符"
	        },
	       
	        cat_desc:{
	            maxlength:"最大不能超过300个字符"
	        }

	    }
	});

	})
	

</script>
	<!--Modal begin-->
	<div id="tree_modal" class="modal fade">
		<div class="modal-header"><button type="button" class="close" data-dismiss="modal">&times;</button></div>
	    <div class="modal-body">
			<div class="row">

			</div>
		</div><!--Modal body-->
		<div class="modal-footer">
			<a href="#" class="btn" data-dismiss="modal" >关闭</a>
		</div><!--Modal footer-->
	</div>
	<!--Modal end-->
	
	
	<div class="row">
		<div class="col-md-12">
			<div class="btn-group pull-right">
				<a href="index.html" th:href="@{/article/category/index/}" id="sample_editable_1_new" class="btn green">返回<i class="fa fa-arrow-circle-o-left"></i></a>
			</div>
		</div>
	</div>
	 
	<div class="row">
		<div class="col-md-12">
			<div class="form">
				<form role="form" id="form_articleCategoryEdit"  th:action="@{/article/category/save}" th:object="${articleCategory}" method="post" class="form-horizontal">
					<h4 class="form-section">帮助中心分类基本信息管理</h4>
					<input type="hidden" id="categoryId" th:field="*{id}" />
					<div class="form-body">
						
						<div class="form-group" th:class="${#fields.hasErrors('name')}? 'form-group has-error' : 'form-group'">
							<label class="control-label col-md-3">分类名称<span class="required" aria-required="true">* </span></label>							
							<div class="col-md-4">
								<input type="text" class="form-control"  id="name" name="name" placeholder="分类名称" th:field="*{name}"/>
								<span class="help-block" th:if="${#fields.hasErrors('name')}" th:errors="*{name}">分类名称不能为空</span>
							</div>
						</div>	
							
 		  				<div class="form-group" th:class="${#fields.hasErrors('parent_id')}? 'form-group has-error' : 'form-group'">
							<label class="control-label col-md-3">上级分类<span class="required" aria-required="true">* </span></label>
							<div class="col-md-4">
							
					            <select th:field="*{parent_id}" th:remove="all-but-first"  class="form-control" style="display:none">
					                <option th:each="data : ${cateParents}" th:value="${data.id}" 
					                 th:text="${data.name}" style="display:none" ></option>
					            </select>	
					            <button id="treebutton" class="btn btn-default dropdown-toggle" type="button"  data-toggle="dropdown">
									分类 <i class="fa fa-angle-down"></i>
								</button>
								<div class="dropdown-menu dropdown-content input-large">
									<div id="category_tree" role="menu"></div>
								</div>
					            <span class="help-block" th:if="${#fields.hasErrors('parent_id')}" th:errors="*{parent_id}">顶级分类不可以修改</span>
					          											
							</div>
						</div> 
						
						<div class="form-group" th:class="${#fields.hasErrors('sort_order')}? 'form-group has-error' : 'form-group'">
							<label class="control-label col-md-3">排序<span class="required" aria-required="true">* </span></label>
							<div class="col-md-4">
								<input type="text"   id="sort_order" name="sort_order" class="form-control" placeholder="显示顺序" th:field="*{sort_order}" />
								<span class="help-block" th:if="${#fields.hasErrors('sort_order')}" th:errors="*{sort_order}">必须填写显示顺序</span>
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-md-3">是否显示<span class="required" aria-required="true"></span></label>
							<div class="col-md-4">
								<div class="radio-list">
									<label class="radio-inline"><span><input type="radio" name="isShow"  id="optionsRadios4" value="1"  checked="checked"  th:field="*{is_show}" /></span> 是</label>
									<label class="radio-inline"><span><input type="radio" name="isShow" id="optionsRadios5" value="0"    th:field="*{is_show}" /></span> 否</label>
								</div>						
							</div>
						</div>				
					
						<div class="form-group">
 						<label class="control-label col-md-3">关键字 <span class="required" aria-required="true"></span> </label>
							<div class="col-md-4">
								<input type="text" class="form-control" name="keywords" id="keywords" placeholder=" " th:field="*{keywords}" />
								<span class="help-block">关键字为选填项，其目的在于方便外部搜索引擎搜索</span>
							</div>
						</div>
						<div class="form-group">
							<label class="control-label col-md-3">描述 <span class="required" aria-required="true"></span></label>
							<div class="col-md-4">
								<input type="text" class="form-control" name="description" id="description" placeholder=" " th:field="*{cat_desc}" />
								<span class="help-block"></span>
							</div>
						</div>
					
						 
						
					</div>
						
					<div class="form-actions fluid">
						<div class="col-md-offset-3 col-md-9">
							<button type="submit" name="btn_submit" id="btn_submit" class="btn blue">提交</button>
							
 						</div>
					</div>
				</form>		
			</div>
		</div>
	</div>
	
<script th:src="@{/plugins/jstree/dist/jstree.min.js}" src="plugins/jstree/dist/jstree.min.js" type="text/javascript"></script>
<script th:inline="javascript">
/*<![CDATA[*/
	
	    $('#category_tree').jstree({
            "core" : {
                'data' : {'url' : function (node) {return '/tree/categoryArticle';}}
            }
        });
        
	    $('#category_tree').on('select_node.jstree', function(e,data) { 
	    	checkCat(data.node.id);       
	    });
	    
	    var result;
	    function getCategoryById(id,categories){   	
	    	$(categories).each(function() { 
	    		if(this.id == id)result = this; 
	    		console.log(this.id);
		    	if(result){
		    		console.log('find it' + result);
		    		return result;
		    	}else{
		    		console.log('not find ,try sub cat' + result);
		    		result = getCategoryById(id,this.children);
		    		return result;
		    	}
	    	});
			return result;
	    }
	    
	    function check(checkId){
	    	var currentId = $("#parent_id").val();
			if($("#id").val() == 0){
				return true;
			}
	    	var thisCategory = getCategoryById(checkId,$('#category_tree').jstree().get_json()[0].children);
	    	var thisSubCategories = [];
	    	//console.log(thisCategory);
	    	addSubCategoriesToArray(thisCategory,thisSubCategories);
	    	//console.log(thisSubCategories);
	    	
	    	var checkPassed = true;
	    	$(thisSubCategories).each(function() {
	    		if(currentId == this){
	    			alert("不能选择自身子类");
	    			checkPassed = false;
	    		}
	    	});
	    	
	    	return checkPassed;
	    }
	    function addSubCategoriesToArray(category,array){
	    	//console.log(category.children);
	    	if(category.children){
		    	$(category.children).each(function() {
		    		console.log(this);
		    		array[array.length] = this.id;	 
		    		console.log(this.children);   		
		    		if(this.children)addSubCategoriesToArray(this.children,array);
		    	});
	    	}
	    }
	    
function checkCat(id){
	if($('#categoryId').val()){
		if(id == $('#categoryId').val()){
			alert('不能选择自己');
			return ;
		}
		
		$.ajax({
			url:'/article/category/check',
			data:{id:$('#categoryId').val(),selectedId:id},
			method:'post',
			success:function(data){
				if(data){
					alert('不能选择自己的子类！');
					return ;
				}else{
		    		$("#parent_id option").each(function() { this.selected = (this.value == id); });
		    		$("#parent_id").change();
		    		$("#tree_modal").modal('hide');				
				}			
			}
		});		
   }else{
	   $("#parent_id option").each(function() { this.selected = (this.value == id); });
	   $("#parent_id").change();
	   $("#tree_modal").modal('hide');	
   }
}
	 
   
	    
/*]]>*/
</script>		
	
</div>	
 
</body>
</html>